<template>
  <div class="product-details-page">
    <!-- 商品详情部分 -->
    <div class="product-details" v-if="product">
      <div class="product-details__left">
        <img class="product-details__image" :src="product.photos" alt="Product Image" />
      </div>
      <div class="product-details__right">
        <h1 class="product-details__name">{{ product.name }}</h1>
        <p class="product-details__description">商品描述：{{ product.descInfo }}</p>
        <div class="product-details__price">￥{{ product.price }}元</div>
        <div class="product-details__description">商品库存：{{ product.sum }}</div>
        <div class="product-details__info-row">
          <span class="product-details__label">配 送：</span>
          <span class="product-details__value">免运费 48小时内发货</span>
        </div>
        <div class="product-details__quantity">
          <span class="product-details__label">数 量:</span>
          <div class="quantity-control">
            &nbsp;
            <el-input-number v-model="chargeNum" :min="1" />
          </div>
        </div>
        <div class="product-details__action-buttons">
          <button class="product-details__button product-details__button--buy" @click="buyNow">
            立即购买
          </button>
          <button class="product-details__button product-details__button--cart" @click="addToCart">
            加入购物车
          </button>
        </div>
      </div>
    </div>

    <!-- 分隔线 -->
    <hr class="divider" />

    <div class="comment-enter">
      <el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
      <el-input
        v-model="commentInfo.information"
        style="width: 1440px"
        type="textarea"
        resize="none"
        autosize="false"
        maxlength="50"
        autofocus
        show-word-limit
        placeholder="请输入你对此商品的评价" />
      <br />
      <el-rate style="margin-left: 60px" v-model="commentInfo.score" />
      <el-button class="button-first" @click="deleteComment">置空</el-button>
      <el-button type="primary" @click="addCommentInfo">发布</el-button>
    </div>

    <!-- 用户评论部分 -->
    <div class="user-comments">
      <h2 class="user-comments__title">用户评论</h2>
      <el-scrollbar v-if="comments" max-height="400px">
        <UserComment v-for="comment in comments" :key="comment.id" :comment="comment" />
      </el-scrollbar>
      <el-empty v-if="comments.length == 0" description="暂无评论" />
    </div>
  </div>
</template>

<script setup>
import { addComment, getAllComment, getGoodsInfo } from '@/api/goods'
import UserComment from '@/components/UserComment.vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { addToCartByNewItem } from '@/api/personInfo'

const route = useRoute()

const router = useRouter()

const goodsId = route.params.id

const userStore = useUserStore()

const user = userStore.getUserInfo()

// 商品信息
const product = ref()

// 获取商品信息
const getGoodsInformation = async () => {
  const res = (await getGoodsInfo(goodsId)).data
  if (res.code == 505) {
    ElMessage.error(res.msg)
    return
  }
  product.value = res.data
}

getGoodsInformation()

// 下单数量
const chargeNum = ref(1)

// 加入购物车
const addToCart = async () => {
  const res = (
    await addToCartByNewItem({
      userId: user.id,
      goodsId,
      isChoose: 0,
      num: chargeNum.value
    })
  ).data
  if (res.code == 504) {
    ElMessage.error('添加失败')
    return
  }
  ElMessage.success('添加成功')
}

// 立即购买
const buyNow = () => {
  if (chargeNum.value > product.value.sum) {
    ElMessage.error('商品存货不足')
    return
  }
  sessionStorage.setItem('payItem', JSON.stringify([{ ...product.value, num: chargeNum.value }]))
  router.push('/pay')
}

// 评论内容
const commentInfo = ref({
  userId: user.id,
  goodsId,
  score: 5,
  information: '',
  time: null
})

// 所有评论
const comments = ref([])

// 删除评论
const deleteComment = () => {
  commentInfo.value.information = ''
  ElMessage.success('清空评论成功')
}

// 获取所有评论
const getAllCommentInfo = async () => {
  const res = (await getAllComment(goodsId)).data
  if (res.code == 505) {
    ElMessage.error(res.msg)
    return
  }
  comments.value = res.data
}

getAllCommentInfo()

// 添加评论
const addCommentInfo = async () => {
  commentInfo.value.time = new Date()
  const res = (await addComment(commentInfo.value)).data
  if (res.code == 504) {
    ElMessage.error(res.msg)
    return
  }
  getAllCommentInfo()
  deleteComment()
  commentInfo.value.information = ''
  ElMessage.success('评论成功')
}
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

.product-details-page {
  max-width: 1600px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
}

.product-details {
  display: flex;
  flex-direction: row;
}

.product-details__left {
  max-width: 330px; /* 调整最大宽度 */
  margin-right: 16px;
}

.product-details__image {
  width: 330px; /* 设置宽度 */
  height: 480px; /* 设置高度 */
  object-fit: cover; /* 保持图片比例 */
  border-radius: 8px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* 图片悬停时放大并增加阴影效果 */
.product-details__image:hover {
  box-shadow: 0 4 px 8px rgba(0, 0, 0, 0.2); /* 新增：图片悬停时增加阴影 */
}

.product-details__right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-details__name {
  font-size: 24px;
  color: #333;
  margin: 0 0 12px;
}

.product-details__description {
  font-size: 14px;
  color: #999;
  margin: 0 0 12px;
}

.product-details__price {
  font-size: 20px;
  color: #e91e63;
  margin: 0 0 12px;
}

.product-details__info-row {
  display: flex;
  margin-bottom: 8px;
}

.product-details__label {
  color: #999;
  margin-right: 8px;
}

.product-details__value {
  color: #333;
}

.product-details__quantity {
  display: flex;
  align-items: center;
  margin: 12px 0;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-control__button {
  background: none;
  border: 1px solid #ccc;
  padding: 4px 8px;
  cursor: pointer;
}

.quantity-control__number {
  margin: 0 12px;
}

.product-details__action-buttons {
  display: flex;
  justify-content: flex-start;
  margin-top: 195px;
  gap: 0; /* 移除间隙，让按钮紧贴在一起 */
}

.product-details__button {
  flex: 1; /* 按钮占满可用空间 */
  padding: 12px 0;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 0; /* 移除单独按钮的圆角 */
}

.product-details__button--buy {
  background-color: #e91e63;
  color: #fff;
  border-top-left-radius: 8px; /* 左上角圆角 */
  border-bottom-left-radius: 8px; /* 左下角圆角 */
  transition: background-color 0.3s;
}

.product-details__button--buy:hover {
  background-color: #c2185b;
}

.product-details__button--cart {
  background-color: #ffa726;
  color: #fff;
  border-top-right-radius: 8px; /* 右上角圆角 */
  border-bottom-right-radius: 8px; /* 右下角圆角 */
  transition: background-color 0.3s;
}

.product-details__button--cart:hover {
  background-color: #fb8c00;
}

.divider {
  border: none;
  border-top: 1px solid #ccc; /* 修改为浅灰色实线 */
  margin: 24px 0;
}

.comment-enter {
  display: block;
  margin-bottom: 40px;
}

.comment-enter .el-avatar {
  margin-right: 10px;
}

.comment-enter .button-first {
  margin-left: 1180px;
}

.comment-enter .el-button {
  margin-top: 10px;
}

.user-comments {
  display: flex;
  flex-direction: column;
}

.user-comments__title {
  font-size: 20px;
  color: #333;
  margin: 0 0 16px;
}
</style>
